<template lang="html">
  <div class="store-list">
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-tickets"></i> 门店列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="门店ID">
            <el-input v-model="storeId" placeholder="门店ID"></el-input>
          </el-form-item>
          <el-form-item label="门店名称">
            <el-input v-model="storeName" placeholder="门店名称"></el-input>
          </el-form-item>
          <el-form-item label="所在城市">
              <el-input v-model="storeCity" placeholder="所在城市"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addStore">新增门店</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="currData" border style="width: 100%" ref="multipleTable">
            <el-table-column prop="id" label="门店Id" width="90"></el-table-column>
            <el-table-column prop="name" label="门店名称" width="150"></el-table-column>
            <el-table-column prop="province" label="省份" width="120"></el-table-column>
            <el-table-column prop="city" label="城市" width="120"></el-table-column>
            <el-table-column prop="district" label="地区" width="120"></el-table-column>
            <el-table-column prop="longitude" label="经度" width="120"></el-table-column>
            <el-table-column prop="latitude" label="纬度" width="120"></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                  <el-button size="small" @click="showDetails(scope.$index, scope.row)">查看详情</el-button>
                  <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination" v-show="totalPages>1">
            <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
            </el-pagination>
        </div>
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageIndex:1,//当前页码
      pageSize:10,//每页10条
      totalElements:1,//默认的总条数
      totalPages:1,//默认的总页数
      currData:[],
      storeCity: '',
      storeId: '',
      storeName: '',
      delVisible:false, //是否显示查看详情弹出层
      delIndex:0,
      delId:0
    }
  },
  mounted(){
    this.getStoreList()
  },
  // computed() {
  // },
  methods: {
    getStoreList () {
      var _this = this
      const querystring = require('querystring');
      const param ={
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
      }
      this.$axios.post('manage/store/list',querystring.stringify(param)).then((res) => {
        //   console.log(res);
        if(res.data.code == 200){
            _this.currData = res.data.data.currData;//赋值 table 列表数据
            // console.log(_this.currData)
            _this.totalElements = res.data.data.totalElements
            _this.totalPages = res.data.data.totalPages;//更新分页总条数
        }else{
            this.$notify.error({
                title: '获取门店列表失败',
                duration:2000,
                message: '失败原因：'+ res.data.msg
            })
        }
      }).catch(error=>{
          console.log(error);
      })
    },
    //分页
    handleCurrentChange(val){
        this.pageIndex = val;
        this.getStoreList ();
    },
    onSubmit () {
      var _this = this
      const querystring = require('querystring');
      const param ={
          pageIndex:this.pageIndex,
          pageSize:this.pageSize,
          name: this.storeName,
          id: this.storeId,
          city: this.storeCity
      }
      this.$axios.post('manage/store/list',querystring.stringify(param)).then((res) => {
          
        if(res.data.code == 200){
            _this.currData = res.data.data.currData;//赋值 table 列表数据
            // console.log(_this.currData)
            _this.totalPages = res.data.data.totalPages;//更新分页总条数
        }else{
            this.$notify.error({
                title: '获取门店列表失败',
                duration:2000,
                message: '失败原因：'+ res.data.msg
            })

        }
      }).catch(error=>{
          console.log(error);
      })
    },
    reset () {
      this.storeCity = '',
      this.storeId = '',
      this.storeName = '',
      this.getStoreList()
    },
    handleDelete (index,row){
      if(row.id && row.id>0){
          this.delVisible = true;
          this.delIndex = index;//当前要删除的下标
          this.delId = row.id;// 当前选中ID
      }
    },
    deleteRow (){
        //console.log("触发了确定");
        if(this.delId>0){
            const querystring = require('querystring');
            const param ={
                id:this.delId
            }
            this.$axios.post('/manage/store/delete',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code == 200){
                    this.currData.splice(this.delIndex, 1);
                    this.$message.success('删除成功');
                    this.delVisible = false;
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        }
    },
    showDetails(index, row) {
      if(row.id && row.id>0){
          this.$router.push({path:"/store/select/"+row.id});
      }
    },
    handleEdit(index, row){
      if (row.id && row.id > 0) {
        this.$router.push({path:"store/edit/" + row.id})
      }
    },
    addStore() {
      this.$router.push({path:"/store/add"});
    }
  },

}
</script>

<style lang="stylus">
</style>
